<template>
	<!-- <z-paging ref="paging" v-model="lists" @query="getapp"> -->
	<!-- <template> -->
	<view class="d-p-r-30 d-back">
		<!-- <u-image :src="picture" width="100vw" height="1618rpx"></u-image> -->
		<view class="d-flex-col flex-column">
			<!-- <view class="justify-start  flex_s d-text-right">
				<text style="font-size: 160rpx;color: #fff;font-weight: 700;">{{ countdown }}</text>
			</view> -->
			<view class="justify-between  flex_s d-text-right" style="padding: 5.5vw 9vw">
				<image src="../../static/27.png" mode="" style="width: 212rpx;height: 212rpx;" @click="fanhui"></image>
				<text style="font-size: 160rpx;color: #fff;font-weight: 700;">{{ countdown }}</text>
			</view>
			<!-- <view style="font-size: 80rpx;color: #fff;" class="d-p-20">
				没有发现卡片
			</view> -->
			<view class="d-list-box d-m-t-20 d-p-20  d-col-top">
				<view class="">
					<view class="" style="text-align: center;color: #fff;font-size: 120rpx;margin-top: 1vw;">
						请输入卡号
					</view>
					<!-- <input placeholder="请输入内容" style="background-color: #fff;width: 30vw;height: 5vw;font-size: 60rpx;color: #000;margin: 0 auto;margin-top: 2vw;" border="none" v-model="value" @change="change"></input> -->
					<!-- <input placeholder="请输入内容" class="your-input" v-model="password" @change="onchange" type="number" readonly></input> -->
					
					<!-- <input class="your-input" :value="password" type="text" readonly @focus="onFocus" placeholder="请输入内容" disabled="true" focus="true"/> -->
					 <!-- <input class="your-input" :disabled="true" focus="true" type="text" placeholder="我是不可输入的输入框"  readonly /> -->
					<keyboard :show="showIf" ref="keyboard" @getPassword="getPassword" @hideKey="showIf=false"
						@backadd="backadd" :detailstyle="detailstyle" @clear='clear'></keyboard>
					<view style="display: flex;align-items: center;ustify-content: center; ">
						<button type="button"
							style="width: 676px;height: 149px;border: 4px solid #FFFFFF;border-radius: 30px;font-size: 100rpx;color: #FFFFFF;background: none;margin: 0 auto;position: absolute;bottom: 6vw;left: 18vw;"
							@click="queding">确定</button>
					</view>
					<!-- <view class="flex-row flex_s"
								style="margin-top: 7vw;margin-left: 2vw;position: fixed;bottom: 27vw;">
								<view class="">
									<image src="../../static/13.png" mode="" style="width: 252rpx;height: 130rpx;"
										@click="fanhui">
									</image>
								</view>
								<view style="margin-left: 1vw;">
									<image src="../../static/14.png" mode="" style="width: 130rpx;height: 130rpx;"
										@click="shouye">
									</image>
								</view>
							</view> -->
				</view>
				<!-- <view class="" style="width: 58vw;height: 56vw;border: 2rpx solid #fff;" v-if="court == '2'">
							<u-image :src="picture4" width="1008rpx" height="688rpx"
								style="margin-left: 5vw;margin-top: 10vw;"></u-image>
							<view class="flex-row flex_s" style="margin-top: 7vw;margin-left: 2vw;">
								<view class="">
									<image src="../../static/13.png" mode="" style="width: 252rpx;height: 130rpx;">
									</image>
								</view>
								<view style="margin-left: 1vw;">
									<image src="../../static/14.png" mode="" style="width: 130rpx;height: 130rpx;">
									</image>
								</view>
							</view>
						</view>
						<view class="" style="width: 58vw;height: 56vw;border: 2rpx solid #fff;" v-if="court == '3'">
							<u-image :src="picture6" width="1008rpx" height="688rpx"
								style="margin-left: 5vw;margin-top: 10vw;"></u-image>
							<view class="flex-row flex_s" style="margin-top: 7vw;margin-left: 2vw;">
								<view class="">
									<image src="../../static/13.png" mode="" style="width: 252rpx;height: 130rpx;">
									</image>
								</view>
								<view style="margin-left: 1vw;">
									<image src="../../static/14.png" mode="" style="width: 130rpx;height: 130rpx;">
									</image>
								</view>
							</view>
						</view> -->
				<!-- <view style="width: 42vw;height: 56vw;">
							<u-image :src="picture5" class="picture5" width="846rpx" height="121rpx"
								style="margin-left: 2vw;"></u-image>

							<view class="picture66" @click="iconclick(1)" :class="{ picture99: dateActivs1 === court }">
							</view>
							<view class="picture77" @click="iconclick(2)"
								:class="{ picture110: dateActivs2 === court }"></view>
							<view class="picture88" @click="iconclick(3)"
								:class="{ picture100: dateActivs3 === court }"></view>
						</view> -->
			</view>
		</view>
		<!-- <view style="display: flex;justify-content: space-between;position: absolute;bottom: 0;">
					<view class="">
						<u-image :src="picture2" width="50vw" height="536rpx"></u-image>
					</view>
					<view class="">
						<u-image :src="picture3" width="50vw" height="536rpx"></u-image>
					</view>
				</view> -->
	</view>
	<!-- </template> -->
	<!-- </z-paging> -->
</template>

<script>
	import keyboard from '@/components/dt-keyboard/dt-keyboard.vue';
	import {
		getAllNoByUser
	} from '@/common/api';
	export default {
		components: {
			keyboard
		},
		data() {
			return {
				lists: [],
				picture: '../../static/2.png',
				picture1: '../../static/17.png',
				picture2: '../../static/1.png',
				picture3: '../../static/18.png',
				picture4: '../../static/6.png',
				picture6: '../../static/15.png',
				picture5: '../../static/9.png',
				show: false,
				failIf: false,
				showIf: true,
				picture55: false,
				picture77: true,
				picture88: true,
				dateActivs1: 1,
				dateActivs2: 2,
				dateActivs3: 3,
				court: 1,
				countdown: 3000,
				timer: null, // 定时器变量
				detailstyle: '',
				show: true
			};
		},
		mounted() {
			this.startCountdown();
		},
		onUnload() {
			clearInterval(this.timer);
			this.timer = null
		},
		// tabbar页面用onHide
		onHide() {
			clearInterval(this.timer);
			this.timer = null
		},
		methods: {
			 onFocus() {
			    },
			fanhui() {
				uni.$u.route({
					url: '/pages/index/index',
					params: {}
				});
			},
			startCountdown() {
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						this.clearTimer();
						uni.$u.route({
							url: '/pages/index/index',
							params: {}
						});
					}
				}, 1000);
			},
			clearTimer() {
				// this.timer = null;
				clearInterval(this.timer);
				this.timer = null
			},
			iconclick(type) {
				console.log(type, '333')
				this.court = type
				if (type == 1) {} else if (type == 2) {
					this.getcontent()
				} else if (type == 3) {
					this.getcontent()
				}
			},
			qupiao() {
				if (this.court == 0) {
					this.getcontent()
					uni.$u.route({
						url: '/pages/login/login',
						params: {}
					});
				}

			},
			getPassword(e) {
				console.log(e, '222222')
				this.detailstyle = e
				// this.$refs.keyboard.clear()
				// if(e!='123456'){
				//     this.failIf = true
				//     this.$refs.keyboard.clear()
				//     setTimeout(()=>this.failIf = false,600)
				// }else{console.log('密码正确')}
			},
			backadd(e) {
				console.log(e, '132')
				this.detailstyle = e
			},
			queding() {
				console.log(11111)
				console.log(this.detailstyle)
				// uni.showToast({
				// 	title: '请输入卡号',
				// 	icon: 'none'
				// });
				// uni.$u.toast('请输入卡号');
				let that = this
				// let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/

				// if (!reg.test(this.detailstyle)) { //判断手机号格式时候正确
				// 	uni.showToast({
				// 		title: '请输入正确的手机号',
				// 		icon: 'none'
				// 	})
				// 	this.detailstyle = ''
				// 	return
				// } else 
				if (this.detailstyle == '') {
					uni.showToast({
						title: '请输入手机号或者卡号',
						icon: 'none'
					})
					return
				} else {
					clearInterval(this.timer);
					this.timer = null
					this.getcontent()
					this.$refs.keyboard.clear()
					uni.$u.route({
						url: '/pages/myvote/myvote',
						params: {
							detailstyle: this.detailstyle,
						}
					});
				}

			},
			clear(e) {
				this.detailstyle = ''
			},
			change(e) {
				console.log('change', e);
			},
			async getcontent(page, limit) {
				getAllNoByUser({
						type: this.court,
						no: this.detailstyle,
						output: 'json'
					})
					.then(res => {
						this.$refs.paging.complete([res]);
						this.info = res;
					})
					.catch(err => {
						this.$ref.paging.complete(false);
					});
			},
			async getapp(page, limit) {},
			fanhui() {
				uni.$u.route({
					url: '/pages/index/index',
				});
			},
			shouye() {
				uni.$u.route({
					url: '/pages/index/index',
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.picture66 {
		width: 846rpx;
		height: 314rpx;
		background-image: url('../../static/10.png');
		background-size: cover;
		background-repeat: no-repeat;
		margin-left: 2vw;
	}

	.picture77 {
		width: 846rpx;
		height: 314rpx;
		background-image: url('../../static/11.png');
		background-size: cover;
		background-repeat: no-repeat;
		margin-left: 2vw;
	}

	.picture88 {
		width: 846rpx;
		height: 314rpx;
		background-image: url('../../static/8.png');
		background-size: cover;
		background-repeat: no-repeat;
		margin-left: 2vw;
	}

	.picture99 {
		width: 846rpx;
		height: 314rpx;
		background-image: url('../../static/7.png');
		background-size: cover;
		background-repeat: no-repeat;
		margin-left: 2vw;
	}

	.picture100 {
		width: 846rpx;
		height: 314rpx;
		background-image: url('../../static/12.png');
		background-size: cover;
		background-repeat: no-repeat;
		margin-left: 2vw;
	}

	.picture110 {
		width: 846rpx;
		height: 314rpx;
		background-image: url('../../static/16.png');
		background-size: cover;
		background-repeat: no-repeat;
		margin-left: 2vw;
	}

	.d-back {
		height: 100%;
		height: 100vh;
		// background: rgb(47, 127, 255);
		background-image: url('../../static/26.png');
		background-size: cover;
		background-repeat: no-repeat;
	}

	.d-tag {
		background: #f3f3f3;
		border-radius: 4rpx;
		height: 36rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 0 18rpx;
	}

	.d-be {
		color: #bebebe;
	}

	.d-red {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-white {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-xuxian {
		width: 100%;
		height: 1rpx;
		border-bottom: 1px dashed white;
		margin-top: 10rpx;
	}

	.d-bold {
		font-weight: bold;

	}
	.your-input {
		width: 80vw;
		height: 10vw;
		font-size: 120rpx;
		color: #ffffff;
		margin: 0 auto;
		margin-top: 1vw;
		padding-left: 50rpx;
		border-bottom: 2rpx #fff solid;
	}
	.uni-input-placeholder {
	    position: absolute;
	    top: auto!important;
	    left: 0;
	    color: #fff;
	    overflow: hidden;
	    text-overflow: clip;
	    white-space: pre;
	    word-break: keep-all;
	    pointer-events: none;
	    line-height: inherit;
	}
</style>